Understanding the :in-range and :out-of-range Pseudo-Classes in CSS
The :in-range and :out-of-range pseudo-classes in CSS are used to style form elements based on whether their current value falls within or outside a specified range. These are particularly useful with input types like number, range, date, or time that have min and max attributes.
:in-range– Selects form elements whose value is within the specifiedminandmaxrange.:out-of-range– Selects form elements whose value is outside the specifiedminandmaxrange.These pseudo-classes update dynamically as the user interacts with the form.
In this example, when the user enters a value within the range 1–10, the input has a green border and light green background. If the value is outside this range, it gets a red border and light red background, providing immediate visual feedback.
Use
:in-rangeand:out-of-rangeto provide instant feedback for numeric or date inputs.Combine with
:requiredor:optionalto enhance form usability.Ensure visual cues like color are distinguishable and accessible.
Test across browsers, as support for some input types may vary.